<template>
  <section class="page-container">
    <section class="info">
      <el-divider content-position="left">
        引导页
      </el-divider>
      <p>
        <span>通常用于首次进入app应用的功能介绍、组件交互、用户注意力转移等场景，基于driver.js开发。 </span>
      </p>

      <p class="mt-20">
        官网：
        <el-link
          href="https://kamranahmed.info/driver.js/#single-element-no-popover"
          type="primary"
          target="_blank"
        >
          driver.js
        </el-link>
      </p>
    </section>
  </section>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

export default defineComponent({
  name: 'GuideIndex',
  setup() {
    const steps = [
      {
        element: '#asideCollapse',
        popover: {
          title: '展示|隐藏左侧导航按钮',
          description: '打开或关闭侧边栏',
          position: 'bottom',
        },
      },
      {
        element: '#fullScreen',
        popover: {
          title: '全屏按钮',
          description: '点击全屏浏览、按Esc即可退出全屏模式',
          position: 'left',
          className: 'driver-popover-item__full-screen',
        },
      },
      {
        element: '#routeTabs',
        popover: {
          title: '多导航标签面板',
          description: '您可以点击选项卡，快速选择已经打开的路由页面',
          position: 'bottom',
        },
      }
    ];
    const createDriver = () => {
      const driverObj = driver({
        animate: true,
        doneBtnText: '完成',
        closeBtnText: '关闭',
        nextBtnText: '下一步',
        prevBtnText: '上一步',
        keyboardControl: true,
        steps
      });
      driverObj.drive();
    };

    onMounted(() => {
      createDriver();
    });
  },
});
</script>
<style>
.driver-popover-item__full-screen {
  top: 2px !important;
}
</style>
<style lang="scss" scoped>
.mt-20 {
  margin-top: 20px;
}
</style>
